<template>
  <div id="index" ref="appRef">
    <div class="bg" :style="{ 'background-image': 'url('+backgroundImage+')' }">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">

        <!--   头部     -->
        <div class="header d-flex">
          <div class="time">
            <span class="timeIcon"></span>
            <span class="timeText">{{ dateYear }} {{ dateDay }} {{ dateWeek }}</span>
          </div>
          <div class="title">
            <div class="title_ch">{{title}}</div>
            <!--            <div class="title_en">Jangsu Suqian Agricultural Greenhouse Visualization Platform</div>-->
          </div>
          <div class="weather">
            <span class="text">{{weatherTemp}}°C {{weatherText}}</span>
          </div>
        </div>

        <!--   内容   -->
        <div class="content d-flex">
          <!--   左侧     -->
          <div class="content_left">
            <div class="left_div">
              <div class="itemTitle">{{one.name}}</div>
              <div class="itemContent">
                <template v-if="one.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="1"></lineChartFirst>
                </template>
                <template v-else-if="one.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="1"></lineChartSecond>
                </template>
                <template v-else-if="one.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="1"></barChartFirst>
                </template>
                <template v-else-if="one.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="1"></barChartSecond>
                </template>
                <template v-else-if="one.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="1"></pieChartFirst>
                </template>
                <template v-else-if="one.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="1"></pieChartSecond>
                </template>
                <template v-else-if="one.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="1"></rowbarChartFirst>
                </template>
                <template v-else-if="one.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="1"></rowbarChartSecond>
                </template>

                <template v-else-if="one.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="1"></smallPercentageFirst>
                </template>
                <template v-else-if="one.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="1"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="one.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="1"></sixInfo2>
                </template>

                <template v-else-if="one.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="1"></threeInfo>
                </template>
                <template v-else-if="one.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="1"></fourInfo>
                </template>
                <template v-else-if="one.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="1"></sixInfo>
                </template>
                <template v-else-if="one.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="1"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{two.name}}</div>
              <div class="itemContent">
                <template v-if="two.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="2"></lineChartFirst>
                </template>
                <template v-else-if="two.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="2"></lineChartSecond>
                </template>
                <template v-else-if="two.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="2"></barChartFirst>
                </template>
                <template v-else-if="two.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="2"></barChartSecond>
                </template>
                <template v-else-if="two.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="2"></pieChartFirst>
                </template>
                <template v-else-if="two.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="2"></pieChartSecond>
                </template>
                <template v-else-if="two.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="2"></rowbarChartFirst>
                </template>
                <template v-else-if="two.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="2"></rowbarChartSecond>
                </template>

                <template v-else-if="two.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="2"></smallPercentageFirst>
                </template>
                <template v-else-if="two.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="2"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="two.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="2"></sixInfo2>
                </template>

                <template v-else-if="two.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="2"></threeInfo>
                </template>
                <template v-else-if="two.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="2"></fourInfo>
                </template>
                <template v-else-if="two.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="2"></sixInfo>
                </template>
                <template v-else-if="two.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="2"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{three.name}}</div>
              <div class="itemContent">
                <template v-if="three.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="3"></lineChartFirst>
                </template>
                <template v-else-if="three.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="3"></lineChartSecond>
                </template>
                <template v-else-if="three.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="3"></barChartFirst>
                </template>
                <template v-else-if="three.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="3"></barChartSecond>
                </template>
                <template v-else-if="three.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="3"></pieChartFirst>
                </template>
                <template v-else-if="three.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="3"></pieChartSecond>
                </template>
                <template v-else-if="three.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="3"></rowbarChartFirst>
                </template>
                <template v-else-if="three.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="3"></rowbarChartSecond>
                </template>

                <template v-else-if="three.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="3"></smallPercentageFirst>
                </template>
                <template v-else-if="three.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="3"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="three.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="3"></sixInfo2>
                </template>

                <template v-else-if="three.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="3"></threeInfo>
                </template>
                <template v-else-if="three.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="3"></fourInfo>
                </template>
                <template v-else-if="three.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="3"></sixInfo>
                </template>
                <template v-else-if="three.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="3"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{four.name}}</div>
              <div class="itemContent">
                <template v-if="four.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="4"></lineChartFirst>
                </template>
                <template v-else-if="four.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="4"></lineChartSecond>
                </template>
                <template v-else-if="four.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="4"></barChartFirst>
                </template>
                <template v-else-if="four.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="4"></barChartSecond>
                </template>
                <template v-else-if="four.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="4"></pieChartFirst>
                </template>
                <template v-else-if="four.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="4"></pieChartSecond>
                </template>
                <template v-else-if="four.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="4"></rowbarChartFirst>
                </template>
                <template v-else-if="four.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="4"></rowbarChartSecond>
                </template>

                <template v-else-if="four.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="4"></smallPercentageFirst>
                </template>
                <template v-else-if="four.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="4"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="four.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="4"></sixInfo2>
                </template>

                <template v-else-if="four.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="4"></threeInfo>
                </template>
                <template v-else-if="four.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="4"></fourInfo>
                </template>
                <template v-else-if="four.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="4"></sixInfo>
                </template>
                <template v-else-if="four.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="4"></nineInfo>
                </template>
              </div>
            </div>
          </div>
          <!--   中间     -->
          <div class="content_center">
            <div class="center_top">
              <!--     中间头    -->
              <div class="center-count">
                <headerThree :configCode="configCode" :index="11"></headerThree>
<!--                <div class="center-count-c">-->
<!--                  <div class="count-icon1">-->
<!--                    <img src="../assets/img/centerTopIcon1.svg" style="margin-top: 27px;"/>-->
<!--                  </div>-->
<!--                  <div class="count-content">-->
<!--                    <div class="count-content-title">{{deviceStatus.nameOne}}</div>-->
<!--                    <div class="count-content-count">{{deviceStatus.valueOne}}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="center-count-c">-->
<!--                  <div class="count-icon2">-->
<!--                    <img src="../assets/img/centerTopIcon2.svg" style="margin-top: 27px;margin-left: 3px;"/>-->
<!--                  </div>-->
<!--                  <div class="count-content">-->
<!--                    <div class="count-content-title">{{deviceStatus.nameTwo}}</div>-->
<!--                    <div class="count-content-count">{{deviceStatus.valueTwo}}</div>-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="center-count-c">-->
<!--                  <div class="count-icon3">-->
<!--                    <img src="../assets/img/centerTopIcon3.svg" style="margin-top: 27px;margin-right: 8px;"/>-->
<!--                  </div>-->
<!--                  <div class="count-content">-->
<!--                    <div class="count-content-title">{{deviceStatus.nameThree}}</div>-->
<!--                    <div class="count-content-count">{{deviceStatus.valueThree}}</div>-->
<!--                  </div>-->
<!--                </div>-->
              </div>
              <!--     中间体    -->
              <div class="center-center" v-if="(twelve.picCode && thirteen.picCode)">
                <div class="cb_div mr_20">
                  <div class="itemTitle">{{twelve.name}}</div>
                  <div class="itemContent">
                    <template v-if="twelve.picCode=='ZJ_ZX_ONE'">
                      <lineChartFirst :configCode="configCode" :index="12"></lineChartFirst>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_ZX_TWO'">
                      <lineChartSecond :configCode="configCode" :index="12"></lineChartSecond>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_ZZ_ONE'">
                      <barChartFirst :configCode="configCode" :index="12"></barChartFirst>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_ZZ_TWO'">
                      <barChartSecond :configCode="configCode" :index="12"></barChartSecond>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_BT_ONE'">
                      <pieChartFirst :configCode="configCode" :index="12"></pieChartFirst>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_BT_TWO'">
                      <pieChartSecond :configCode="configCode" :index="12"></pieChartSecond>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_TX_ONE'">
                      <rowbarChartFirst :configCode="configCode" :index="12"></rowbarChartFirst>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_TX_TWO'">
                      <rowbarChartSecond :configCode="configCode" :index="12"></rowbarChartSecond>
                    </template>

                    <template v-else-if="twelve.picCode=='ZJ_BFB_TWO_S_BIG'">
                      <bigPercentageFirst :configCode="configCode" :index="12"></bigPercentageFirst>
                    </template>
                    <template v-else-if="twelve.picCode=='ZJ_BFB_TWO_B_BIG'">
                      <bigPercentageSecond :configCode="configCode" :index="12"></bigPercentageSecond>
                    </template>
                  </div>
                </div>
                <div class="cb_div">
                  <div class="itemTitle">{{thirteen.name}}</div>
                  <div class="itemContent">
                    <template v-if="thirteen.picCode=='ZJ_ZX_ONE'">
                      <lineChartFirst :configCode="configCode" :index="13"></lineChartFirst>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_ZX_TWO'">
                      <lineChartSecond :configCode="configCode" :index="13"></lineChartSecond>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_ZZ_ONE'">
                      <barChartFirst :configCode="configCode" :index="13"></barChartFirst>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_ZZ_TWO'">
                      <barChartSecond :configCode="configCode" :index="13"></barChartSecond>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_BT_ONE'">
                      <pieChartFirst :configCode="configCode" :index="13"></pieChartFirst>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_BT_TWO'">
                      <pieChartSecond :configCode="configCode" :index="13"></pieChartSecond>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_TX_ONE'">
                      <rowbarChartFirst :configCode="configCode" :index="13"></rowbarChartFirst>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_TX_TWO'">
                      <rowbarChartSecond :configCode="configCode" :index="13"></rowbarChartSecond>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_BFB_TWO_S_BIG'">
                      <bigPercentageFirst :configCode="configCode" :index="13"></bigPercentageFirst>
                    </template>
                    <template v-else-if="thirteen.picCode=='ZJ_BFB_TWO_B_BIG'">
                      <bigPercentageSecond :configCode="configCode" :index="13"></bigPercentageSecond>
                    </template>
                  </div>
                </div>
              </div>
            </div>
            <div class="center_bottom d-flex">
              <div class="cb_div mr_20">
                <div class="itemTitle">{{nine.name}}</div>
                <div class="itemContent">
                  <template v-if="nine.picCode == 'ZJ_TABLE_ONE'">
                    <tableOne :configCode="configCode" :index="9"></tableOne>
                  </template>
                  <template v-else-if="nine.picCode == 'ZJ_TABLE_TWO'">
                    <tableTwo :configCode="configCode" :index="9"></tableTwo>
                  </template>
                </div>
              </div>
              <div class="cb_div">
                <div class="itemTitle">{{ten.name}}</div>
                <div class="itemContent">
                  <template v-if="ten.picCode == 'ZJ_TABLE_ONE'">
                    <tableOne :configCode="configCode" :index="10"></tableOne>
                  </template>
                  <template v-else-if="ten.picCode == 'ZJ_TABLE_TWO'">
                    <tableTwo :configCode="configCode" :index="10"></tableTwo>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <!--   右侧     -->
          <div class="content-right">
            <div class="left_div">
              <div class="itemTitle">{{five.name}}</div>
              <div class="itemContent">
                <template v-if="five.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="5"></lineChartFirst>
                </template>
                <template v-else-if="five.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="5"></lineChartSecond>
                </template>
                <template v-else-if="five.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="5"></barChartFirst>
                </template>
                <template v-else-if="five.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="5"></barChartSecond>
                </template>
                <template v-else-if="five.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="5"></pieChartFirst>
                </template>
                <template v-else-if="five.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="5"></pieChartSecond>
                </template>
                <template v-else-if="five.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="5"></rowbarChartFirst>
                </template>
                <template v-else-if="five.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="5"></rowbarChartSecond>
                </template>

                <template v-else-if="five.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="5"></smallPercentageFirst>
                </template>
                <template v-else-if="five.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="5"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="five.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="5"></sixInfo2>
                </template>

                <template v-else-if="five.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="5"></threeInfo>
                </template>
                <template v-else-if="five.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="5"></fourInfo>
                </template>
                <template v-else-if="five.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="5"></sixInfo>
                </template>
                <template v-else-if="five.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="5"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{six.name}}</div>
              <div class="itemContent">
                <template v-if="six.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="6"></lineChartFirst>
                </template>
                <template v-else-if="six.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="6"></lineChartSecond>
                </template>
                <template v-else-if="six.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="6"></barChartFirst>
                </template>
                <template v-else-if="six.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="6"></barChartSecond>
                </template>
                <template v-else-if="six.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="6"></pieChartFirst>
                </template>
                <template v-else-if="six.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="6"></pieChartSecond>
                </template>
                <template v-else-if="six.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="6"></rowbarChartFirst>
                </template>
                <template v-else-if="six.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="6"></rowbarChartSecond>
                </template>

                <template v-else-if="six.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="6"></smallPercentageFirst>
                </template>
                <template v-else-if="six.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="6"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="six.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="6"></sixInfo2>
                </template>

                <template v-else-if="six.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="6"></threeInfo>
                </template>
                <template v-else-if="six.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="6"></fourInfo>
                </template>
                <template v-else-if="six.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="6"></sixInfo>
                </template>
                <template v-else-if="six.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="6"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{seven.name}}</div>
              <div class="itemContent">
                <template v-if="seven.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="7"></lineChartFirst>
                </template>
                <template v-else-if="seven.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="7"></lineChartSecond>
                </template>
                <template v-else-if="seven.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="7"></barChartFirst>
                </template>
                <template v-else-if="seven.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="7"></barChartSecond>
                </template>
                <template v-else-if="seven.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="7"></pieChartFirst>
                </template>
                <template v-else-if="seven.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="7"></pieChartSecond>
                </template>
                <template v-else-if="seven.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="7"></rowbarChartFirst>
                </template>
                <template v-else-if="seven.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="7"></rowbarChartSecond>
                </template>

                <template v-else-if="seven.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="7"></smallPercentageFirst>
                </template>
                <template v-else-if="seven.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="7"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="seven.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="7"></sixInfo2>
                </template>

                <template v-else-if="seven.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="7"></threeInfo>
                </template>
                <template v-else-if="seven.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="7"></fourInfo>
                </template>
                <template v-else-if="seven.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="7"></sixInfo>
                </template>
                <template v-else-if="seven.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="7"></nineInfo>
                </template>
              </div>
            </div>
            <div class="left_div">
              <div class="itemTitle">{{eight.name}}</div>
              <div class="itemContent">
                <template v-if="eight.picCode=='ZJ_ZX_ONE'">
                  <lineChartFirst :configCode="configCode" :index="8"></lineChartFirst>
                </template>
                <template v-else-if="eight.picCode=='ZJ_ZX_TWO'">
                  <lineChartSecond :configCode="configCode" :index="8"></lineChartSecond>
                </template>
                <template v-else-if="eight.picCode=='ZJ_ZZ_ONE'">
                  <barChartFirst :configCode="configCode" :index="8"></barChartFirst>
                </template>
                <template v-else-if="eight.picCode=='ZJ_ZZ_TWO'">
                  <barChartSecond :configCode="configCode" :index="8"></barChartSecond>
                </template>
                <template v-else-if="eight.picCode=='ZJ_BT_ONE'">
                  <pieChartFirst :configCode="configCode" :index="8"></pieChartFirst>
                </template>
                <template v-else-if="eight.picCode=='ZJ_BT_TWO'">
                  <pieChartSecond :configCode="configCode" :index="8"></pieChartSecond>
                </template>
                <template v-else-if="eight.picCode=='ZJ_TX_ONE'">
                  <rowbarChartFirst :configCode="configCode" :index="8"></rowbarChartFirst>
                </template>
                <template v-else-if="eight.picCode=='ZJ_TX_TWO'">
                  <rowbarChartSecond :configCode="configCode" :index="8"></rowbarChartSecond>
                </template>

                <template v-else-if="eight.picCode=='ZJ_BFB_ONE_S_SM'">
                  <smallPercentageFirst :configCode="configCode" :index="8"></smallPercentageFirst>
                </template>
                <template v-else-if="eight.picCode=='ZJ_BFB_ONE_B_SM'">
                  <smallPercentageSecond :configCode="configCode" :index="8"></smallPercentageSecond>
                </template>
                <!--    设备状态图小    -->
                <template v-else-if="eight.picCode=='ZJ_STATUS_SM'">
                  <sixInfo2 :configCode="configCode" :index="8"></sixInfo2>
                </template>

                <template v-else-if="eight.picCode=='ZJ_TX_THREE'">
                  <threeInfo :configCode="configCode" :index="8"></threeInfo>
                </template>
                <template v-else-if="eight.picCode=='ZJ_FOUR'">
                  <fourInfo :configCode="configCode" :index="8"></fourInfo>
                </template>
                <template v-else-if="eight.picCode=='ZJ_SIX'">
                  <sixInfo :configCode="configCode" :index="8"></sixInfo>
                </template>
                <template v-else-if="eight.picCode=='ZJ_NINE'">
                  <nineInfo :configCode="configCode" :index="8"></nineInfo>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import drawMixin from "@/utils/drawMixin";
  import { formatTime } from '@/utils/index.js'

  import lineChartFirst from '@/components/echart/line/first/lineChartFirst.vue'
  import lineChartSecond from '@/components/echart/line/second/lineChartSecond.vue'
  import pieChartFirst from '@/components/echart/pie/first/pieChartFirst.vue'
  import pieChartSecond from '@/components/echart/pie/second/pieChartSecond.vue'
  import barChartFirst from '@/components/echart/colbar/first/barChartFirst.vue'
  import barChartSecond from '@/components/echart/colbar/second/barChartSecond.vue'
  import rowbarChartFirst from '@/components/echart/rowbar/first/barChartFirst.vue'
  import rowbarChartSecond from '@/components/echart/rowbar/second/barChartSecond.vue'

  import tableOne from '@/components/echart/table/first/index.vue'
  import tableTwo from '@/components/echart/table/second/index.vue'

  import bigPercentageFirst from '@/components/echart/bigPercentage/first/index.vue'
  import bigPercentageSecond from '@/components/echart/bigPercentage/second/index.vue'
  import smallPercentageFirst from '@/components/echart/smallPercentage/first/index.vue'
  import smallPercentageSecond from '@/components/echart/smallPercentage/second/index.vue'


  import nineInfo from '@/components/information/nineInfo.vue'
  import sixInfo from '@/components/information/sixInfo.vue'
  import sixInfo2 from '@/components/information/sixInfo2.vue'
  import fourInfo from '@/components/information/fourInfo.vue'
  import threeInfo from '@/components/information/threeInfo.vue'
  import headerThree from '@/components/information/header_three.vue'

  export default {
    mixins: [drawMixin],
    data() {
      return {
        weatherTemp: '',
        weatherText: '',
        configCode: "Visual06268456336",
        timing: null,
        weathering: null,
        loading: true,
        dateDay: null,
        dateYear: null,
        dateWeek: null,
        weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        title: '智慧能源综合管理平台',
        backgroundImage: '',
        one: {
          name: '',
          picCode: ''
        },
        two: {
          name: '',
          picCode: ''
        },
        three: {
          name: '',
          picCode: ''
        },
        four: {
          name: '',
          picCode: ''
        },
        five: {
          name: '',
          picCode: ''
        },
        six: {
          name: '',
          picCode: ''
        },
        seven: {
          name: '',
          picCode: ''
        },
        eight: {
          name: '',
          picCode: ''
        },
        nine: {
          name: '',
          picCode: ''
        },
        ten: {
          name: '',
          picCode: ''
        },
        eleven: {
          name: '',
          picCode: ''
        },
        twelve: {
          name: '',
          picCode: ''
        },
        thirteen: {
          name: '',
          picCode: ''
        },
        // deviceStatus: {}
      }
    },
    components: {
      lineChartFirst,
      lineChartSecond,
      pieChartFirst,
      pieChartSecond,
      barChartFirst,
      barChartSecond,
      rowbarChartFirst,
      rowbarChartSecond,
      tableOne,
      tableTwo,
      bigPercentageFirst,
      bigPercentageSecond,
      smallPercentageFirst,
      smallPercentageSecond,
      nineInfo,
      sixInfo,
      sixInfo2,
      fourInfo,
      threeInfo,
      headerThree
    },
    created() {
      if (this.$route.query.configCode) {
        this.configCode = this.$route.query.configCode
      }
    },
    mounted() {
      this.timeFn()
      this.queryConfig()
      this.weatherFn();
    },
    beforeDestroy() {
      clearInterval(this.timing)
      clearInterval(this.weathering)
    },
    methods: {
      // 获取日期
      timeFn() {
        this.timing = setInterval(() => {
          this.dateDay = formatTime(new Date(), 'HH:mm:ss')
          this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
          this.dateWeek = this.weekday[new Date().getDay()]
        }, 1000)
      },
      // 获取天气360 0000
      weatherFn() {
        this.$http.get("https://devapi.qweather.com/v7/weather/now?location=101190701&key=e3f4af70092b49f78abc514d74a5cba1").then(res => {
          if (res.data.code == '200') {
            this.weatherTemp = res.data.now.temp
            this.weatherText = res.data.now.text
          }
        })
        this.weathering = setInterval(() => {
          this.$http.get("https://devapi.qweather.com/v7/weather/now?location=101190701&key=e3f4af70092b49f78abc514d74a5cba1").then(res => {
            if (res.data.code == '200') {
              this.weatherTemp = res.data.now.temp
              this.weatherText = res.data.now.text
            }
          })
        }, 60*60*1000)

      },

      queryConfig() {
        this.$http.get("/visShow/queryConfig", {
          params: {
            configCode: this.configCode
          }
        }).then(res => {
          const {data} = res
          console.log(data, '首页')
          if (data.status == 200) {
            this.title = data.object.visualizationName
            this.backgroundImage = data.object.downPic
            this.one = data.object.setInfo[0].one
            this.two = data.object.setInfo[1].two
            this.three = data.object.setInfo[2].three
            this.four = data.object.setInfo[3].four
            this.five = data.object.setInfo[4].five
            this.six = data.object.setInfo[5].six
            this.seven = data.object.setInfo[6].seven
            this.eight = data.object.setInfo[7].eight
            this.nine = data.object.setInfo[8].nine
            this.ten = data.object.setInfo[9].ten
            this.eleven = data.object.setInfo[10].eleven
            this.twelve = data.object.setInfo[11].twelve
            this.thirteen = data.object.setInfo[12].thirteen
            // this.queryDevice()
            this.loading = false
          }
        }).catch(err => {
          console.log(err)
        })
      },

      // queryDevice() {
      //   this.$http.get("/visShow/queryData", {
      //     params: {
      //       configCode: this.configCode,
      //       index: '11'
      //     }
      //   }).then(res => {
      //     const {data} = res
      //     console.log(data, '中间头')
      //     if (data.status == 200) {
      //       this.deviceStatus = data.object
      //     }
      //   }).catch(err => {
      //     console.log(err)
      //   })
      // },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/scss/index.scss';

  ::v-deep #he-plugin-simple {
    position: absolute !important;
    width: 180px;
    z-index: 99999;
  }
</style>
